<template>
    <div>
        <div id="all">
            <div></div>
            <div class="p1">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <el-menu-item index="1"><router-link to="/produce">首页</router-link></el-menu-item>
                    <el-menu-item index="2"><router-link to="/navi">我要派单</router-link></el-menu-item>
                    <el-menu-item index="3"><router-link to='/TaskCard'>我要接单</router-link></el-menu-item>
                    <el-menu-item index="4"><router-link to='/Upload'>意见反馈</router-link></el-menu-item>
                    <el-menu-item index="5">帮助</el-menu-item>
                    <el-menu-item index="6">{{showUserName}}</el-menu-item>
                    <el-menu-item index="7" @click="giao"><el-avatar :src="imgpath"></el-avatar></el-menu-item>
                    <!--<el-menu-item index="7"><router-link to='/User'><el-avatar icon="el-icon-user-solid" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar></router-link></el-menu-item>-->
                </el-menu>
            </div>
        </div>
        <el-container>
            <el-main>
                <el-carousel :interval="4000" initial-index="0" type="card" height="30vw">
                    <el-carousel-item v-for="item in 4" :key="item">
                    </el-carousel-item>
                </el-carousel>
                <el-image :src="src" width="100%"></el-image>
                <el-row :gutter="20">
                    <el-col :md="6" :xs="24">
                        <el-card :body-style="{ padding: '0px' }" shadow="hover">
                            <img src="../assets/img/买.png" class="image">
                            <div style="padding: 2px;">
                                <span>帮我买</span>
                                <div class="bottom clearfix">
                                    <el-button type="text" class="button" @click="goTom">去看看</el-button>
                                </div>
                            </div>
                        </el-card>
                    </el-col>

                    <el-col :md="6" :xs="24">
                        <el-card :body-style="{ padding: '0px' }" shadow="hover">
                            <img src="../assets/img/取.png" class="image">
                            <div style="padding: 2px;">
                                <span>帮我取</span>
                                <div class="bottom clearfix">
                                    <el-button type="text" class="button" @click="goToq">去看看</el-button>
                                </div>
                            </div>
                        </el-card>
                    </el-col>

                    <el-col :md="6" :xs="24">
                        <el-card :body-style="{ padding: '0px' }" shadow="hover">
                            <img src="../assets/img/排.png" class="image">
                            <div style="padding: 2px;">
                                <span>帮我排</span>

                                <div class="bottom clearfix">
                                    <el-button type="text" class="button" @click="goTop">去看看</el-button>
                                </div>
                            </div>
                        </el-card>
                    </el-col>

                    <el-col :md="6" :xs="24">
                        <el-card :body-style="{ padding: '0px' }" shadow="hover">
                            <img src="../assets/img/送.png" class="image">
                            <div style="padding: 2px;">
                                <span>帮我送</span>
                                <div class="bottom clearfix">
                                    <el-button type="text" class="button" @click="goTos">去看看</el-button>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-main>

            <el-footer>版权归进击的爱马仕所有</el-footer>

        </el-container>
    </div>
</template>
<script>
import router from '@/router'
import BuyPage from './BuyPage.vue';
import DrawPage from './DrawPage.vue';
import Cookie from 'js-cookie';
export default {
    data() {
        return {
            src: require("../assets/img/一呼百应.png"),
            activeIndex: '1',
            activeIndex2:'1',
            content:'',
            tabPosition: 'left',
            imgpath:''
        };
    },
    methods: {
        giao(){
            this.$router.push('/user')
        },
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        goTom() {
            this.$router.push("/buy");
        },
        goToq() {
            this.$router.push("/draw");
        },
        goTop() {
            this.$router.push("/queue");
        },
        goTos() {
            this.$router.push("/deliver");
        },
        handleSelect(key) {
        switch (key) {
          case "1":
            this.content =''
            break;
          case "2":
            this.content =BuyPage
            break;
          case "3":
            this.content = DrawPage
            break;
        }
      },
      handleMenuSelect(index){
        console.log(index)
      }
    },
    computed:{
      showUserName(){
        return Cookie.get('username')
      }
    },
    created(){
        const giao = Cookie.get('username')
        this.username = giao;
        const imgdata = localStorage.getItem('imgpath')
        this.imgpath= imgdata
    },
    components: { router }
}
</script>
<style>
.header {
    display: flex;
}

.header>div {
    width: 100px;
    height: 30px;
    color: #fff;
    background-color: #00b7ee;
    border: 1px solid black;
    line-height: 30px;
    text-align: center;
    text-decoration: none;
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}

.el-carousel__item:nth-child(3) {
    background-image: url('../assets/img/校园1.jpeg');
    background-size: 50vw 30vw;
}

.el-carousel__item:nth-child(4) {
    background-image: url('../assets/img/校园2.png');
    background-size: 50vw 30vw;
}

.el-carousel__item:nth-child(5) {
    background-image: url('../assets/img/动嘴.jpeg');
    background-size: 50vw 30vw;
}

.el-carousel__item:nth-child(6) {
    background-image: url('../assets/img/服务.jpeg');
    background-size: 50vw 30vw;
}

.el-header,
.el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
}


.el-main {
    background-color: #ffffff;
    color: #333;
    text-align: center;
    line-height: 160px;
}

body>.el-container {
    margin-bottom: 40px;
}


.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    float: right;
}

.image {
    width: 100%;
    display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}
.p2{
    display: flex;
    flex-direction: row;
}

.admin-content{
    width: 80%;
    margin-top: 20px;
    margin-left: -300px;
    
}
.admin-sidebar{
    width: 20%;
    height: 600px;
}
li.el-menu-item{
    height: 150px;
    line-height: 150px;
}
.el-menu--horizontal>.el-menu-item{
    margin-left: 50px;
    position: relative;
    left: 500px;
}
</style>